<template>
  <vab-query-form>
    <vab-query-form-top-panel v-if="config_table.search">
      <el-form inline label-width="49px" :model="queryForm" @submit.prevent>
        <!-- 外键单选 -->
        <template v-for="col in config_table.cols">
          <template v-for="(foreign, f_index) in config_table.foreign_list">
            <el-form-item class="z-col" v-if="col.model == f_index">
              <el-select v-model.trim="queryForm.search[col.field]" clearable filterable :placeholder="'请选择' + col.comment">
                <el-option
                  v-for="(status_item, status_index) in config_table.foreign_list[col.model]"
                  :key="status_index"
                  :label="status_item.name"
                  :value="status_item.id"
                />
              </el-select>
            </el-form-item>
          </template>
        </template>
        <!-- 外键多选 -->
        <template v-for="col in config_table.cols">
          <template v-for="(selection, s_index) in config_table.selection_list">
            <el-form-item class="z-col" v-if="col.model == s_index">
              <el-select v-model.trim="queryForm.search[col.field]" clearable filterable multiple :placeholder="'请选择' + col.comment">
                <el-option
                  v-for="(status_item, status_index) in selection_list[col.model]"
                  :key="status_index"
                  :label="status_item.name"
                  :value="status_item.name"
                />
              </el-select>
            </el-form-item>
          </template>
        </template>

        <template v-for="ds in config_table.date_search">
          <el-form-item class="z-col2" label="">
            <el-date-picker
              v-model="queryForm[ds.field]"
              :end-placeholder="ds.name + '结束日期'"
              range-separator="至"
              :start-placeholder="ds.name + '开始日期'"
              type="daterange"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </template>

        <el-form-item class="z-col">
          <el-input v-model="queryForm.key" clearable :placeholder="'请输入' + config_table.search + '搜索'" />
        </el-form-item>

        <el-form-item class="z-col_">
          <el-button :icon="Search" :loading="listLoading" native-type="submit" type="primary" @click="selectData">查询</el-button>
        </el-form-item>
        <el-form-item class="z-col_">
          <el-button :icon="Expand" type="primary" @click="exportData">导出</el-button>
        </el-form-item>
      </el-form>
    </vab-query-form-top-panel>

    <vab-query-form-left-panel>
      <el-button v-if="!is_recycle" :icon="Plus" type="primary" @click="add">添加</el-button>
      <el-button v-if="!is_recycle" :icon="Delete" type="danger" @click="del">离职</el-button>
      <el-button v-if="is_recycle" :icon="Plus" type="primary" @click="recovery">恢复</el-button>
      <el-button v-if="is_recycle" :icon="Delete" type="danger" @click="com_del">彻底删除</el-button>
    </vab-query-form-left-panel>
    <vab-query-form-right-panel>
      <div class="custom-table-right-tools">
        <el-button v-if="!is_recycle && config_table.login_log.accountid == '1'" type="info" @click="recycle">
          <vab-icon icon="recycle-fill" />
          <span>离职人员</span>
        </el-button>
        <el-button v-else type="info" @click="getData">
          <vab-icon icon="arrow-left-double-fill" />
          <span>返回</span>
        </el-button>
      </div>
    </vab-query-form-right-panel>
  </vab-query-form>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'ObjOpbar',
})
import { Delete, Expand, Plus, Search } from '@element-plus/icons-vue'
const props = defineProps({
  is_recycle: {
    type: Boolean,
    default: false,
  },
  config_table: {
    type: Object,
    default: {},
  },
})

const emit = defineEmits(['fetch-data', 'add', 'del', 'recovery', 'com_del', 'recycle', 'getData'])

const queryForm = reactive<any>({
  page: 1,
  num: 20,
  sort: '',
  key: '',
  orderby: '',
  search: {},
})
//导出数据
const exportData = () => {
  if (queryForm.search) {
    //json转字符串
    queryForm.search = JSON.stringify(queryForm.search)
  }
  let date_search = ''
  for (let i = 0; i < props.config_table.date_search.length; i++) {
    if (queryForm[props.config_table.date_search[i].field]) {
      date_search += '&' + props.config_table.date_search[i].field + '=' + queryForm[props.config_table.date_search[i].field]
    }
  }
  window.open(
    `${import.meta.env.VITE_APP_BASE_URL}` +
      props.config_table.tablename +
      '/exportData?key=' +
      queryForm.key +
      '&sort=' +
      queryForm.sort +
      '&orderby=' +
      queryForm.orderby +
      '&search=' +
      queryForm.search +
      date_search,
    '_blank'
  )
  if (queryForm.search) {
    //字符串转json
    queryForm.search = JSON.parse(queryForm.search)
  }
}
//查看数据
const getData = () => {
  //调用主框架中的方法
  emit('getData')
}
//查看回收站
const recycle = () => {
  //调用主框架中的方法
  emit('recycle')
}
//进行添加
const add = () => {
  //调用主框架中的方法
  emit('add')
}
//进行批量删除
const del = () => {
  //调用主框架中的方法
  emit('del', false)
}
//进行批量恢复
const recovery = () => {
  //调用主框架中的方法
  emit('recovery', false)
}
//进行批量彻底删除
const com_del = () => {
  //调用主框架中的方法
  emit('com_del', false)
}

//进行搜索
const selectData = () => {
  if (queryForm.search) {
    //json转字符串
    queryForm.search = JSON.stringify(queryForm.search)
  }
  //调用主框架中的方法
  emit('fetch-data', queryForm)
  if (queryForm.search) {
    //字符串转json
    queryForm.search = JSON.parse(queryForm.search)
  }
}
</script>
<style scoped>
.z-col {
  width: 150px;
  padding: 5px;
}
.z-col2 {
  width: 300px;
  padding: 5px;
}

.z-col_ {
  width: 88px;
  padding: 5px;
}
</style>
